<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        #map_container {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
    <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
    <script src="https://mapv.baidu.com/build/mapv.js"></script>
    <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
    <title>地图展示</title>
</head>

<body>
    <div id="map_container"></div>
    <script type="text/javascript">
        var map = initMap({
            tilt: 80,
            heading: -45.3,
            center: [106.540547, 29.564858],
            zoom: 17
        });
        initData();

        function initData() {
            /* 获取城市建筑物经纬度 */
            fetch('https://www.youbaobao.xyz/datav-res/examples/chongqing.json')
                .then(res => res.json())
                .then(res => {
                    var data = res;
                    var polygons = [];
                    var len = data.length;
                    for (var i = 0; i < len; i++) {
                        var line = data[i];
                        var polygon = [];
                        /* 
                            莫卡拖坐标系
                            将经纬度转换为坐标-利用接口
                            官方方法
                        */
                        var pt = [line[1] * 512, line[2] * 512];
                        for (var j = 3; j < line.length; j += 2) {
                            pt[0] += line[j] / 100 / 2;
                            pt[1] += line[j + 1] / 100 / 2;
                            polygon.push([pt[0], pt[1]]);
                        }
                        polygons.push({
                            geometry: {
                                type: 'Polygon', // 多边形
                                coordinates: [polygon] // 三维数组
                            },
                            properties: {
                                height: line[0] / 2 // 建筑高度
                            }
                        });
                    }
                    setData(polygons);
                });

        }

        function setData(data) {
            var view = new mapvgl.View({
                map: map
            });

            var shaperLayer = new mapvgl.ShapeLayer({
                color: 'rgb(0, 255, 255)',
                blend: 'lighter',
                // style: 'normal',
                // style: 'gradual',
                style: 'windowAnimation',
                opacity: 1.0, // 透明度
                riseTime: 2000, // 楼房升起动画
            });

            view.addLayer(shaperLayer);
            shaperLayer.setData(data);
        }
    </script>
</body>

</html>